<template>
	<view class="address-list-container">
		<!-- 地址列表 -->
		<view class="address-list" v-if="addressList.length > 0">
			<view class="address-item" v-for="(item, index) in addressList" :key="index" @click="selectAddress(item)">
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{item.receiverName}}</text>
						<text class="phone">{{item.receiverPhone}}</text>
						<view class="tag" v-if="item.isDefault == '1'">
							<u-tag text="默认" type="primary" size="mini"></u-tag>
						</view>
					</view>
					<view class="address-detail">
						{{item.province}} {{item.city}} {{item.district}} {{item.detailAddress}}
					</view>
				</view>
				<view class="address-action">
					<view class="edit" @click.stop="editAddress(item)">
						<u-icon name="edit-pen" size="20" color="skyblue"></u-icon>
					</view>
					<view class="delete" @click.stop="deleteAddress(item)">
						<u-icon name="trash" size="20" color="red"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<u-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/address.png" text="暂无收货地址"></u-empty>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<u-button type="primary" text="新增收货地址" @click="addAddress"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				fromOrder: false // 是否从订单页面跳转而来
			}
		},
		onLoad(options) {
			// 判断是否从订单页面跳转而来
			if (options.from === 'order') {
				this.fromOrder = true
			}
		},
		onShow() {
			// 获取地址列表
			this.getAddressList()
		},
		methods: {
			// 获取地址列表
			getAddressList() {
				// 获取用户信息
				const userInfo = this.$user.getUserInfo()
				if (!userInfo || !userInfo.openid) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '加载中...'
				})

				this.$api.getAddressList({
					userId: userInfo.openid
				}).then(res => {
					uni.hideLoading()
					this.addressList = res || []
					console.log('地址列表:', this.addressList)
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '获取地址列表失败',
						icon: 'none'
					})
				})
			},

			// 选择地址
			selectAddress(item) {
				if (this.fromOrder) {
					// 如果是从订单页面跳转而来，则选择地址后返回
					const pages = getCurrentPages()
					const prevPage = pages[pages.length - 2]

					// 向上一页传递选中的地址
					if (prevPage && prevPage.$vm) {
						prevPage.$vm.selectedAddress = item
					}

					uni.navigateBack()
				}
			},

			// 编辑地址
			editAddress(item) {
				// 将整个地址对象序列化后传递给编辑页面
				const addressStr = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: `/pages/address/edit?address=${addressStr}`
				})
			},

			// 删除地址
			deleteAddress(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该地址吗？',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							})
							this.$api.deleteAddress(item.addressId).then(res => {
								uni.hideLoading()
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								// 重新获取地址列表
								this.getAddressList()
							}).catch(err => {
								uni.hideLoading()
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},

			// 新增地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-list-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 120rpx;

		.address-list {
			padding: 20rpx;

			.address-item {
				display: flex;
				background-color: #ffffff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				.address-info {
					flex: 1;

					.user-info {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							font-size: 32rpx;
							font-weight: 500;
							margin-right: 20rpx;
						}

						.phone {
							font-size: 28rpx;
							color: #606266;
							margin-right: 20rpx;
						}

						.tag {
							margin-left: auto;
						}
					}

					.address-detail {
						font-size: 28rpx;
						color: #606266;
						line-height: 1.5;
					}
				}

				.address-action {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-left: 20rpx;

					.edit,
					.delete {
						padding: 10rpx;
					}

					.edit {
						margin-bottom: 20rpx;
					}
				}
			}
		}

		.empty-state {
			padding: 100rpx 0;
		}

		.bottom-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			background-color: #ffffff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		}
	}
</style>